<template>
    <van-cell title="商品评价" :value="'好评率：' + commentsNum.reply_chance + '%'"/>
    <van-cell>
        <van-button
                size="small"
                class="tag"
                :class="{active: commentType === 0}"
                @click="changeCommentType(0)"
        >
            全部({{commentsNum.sum_count}})
        </van-button>
        <van-button
                size="small"
                class="tag"
                :class="{active: commentType === 1}"
                @click="changeCommentType(1)"
        >
            好评({{commentsNum.good_count}})
        </van-button>
        <van-button
                size="small"
                class="tag"
                :class="{active: commentType === 2}"
                @click="changeCommentType(2)"
        >
            中评({{commentsNum.in_count}})
        </van-button>
        <van-button
                size="small"
                class="tag"
                :class="{active: commentType === 3}"
                @click="changeCommentType(3)"
        >
            差评({{commentsNum.poor_count}})
        </van-button>
    </van-cell>

    <div v-if="comments.length > 0">
        <CommentItem
                v-for="comment in comments"
                :key="comment.id"
                :comment="comment">
        </CommentItem>
    </div>
    <van-empty v-else description="暂时没有评论哦"/>

</template>

<script setup>
  import { defineProps, ref } from 'vue'
  import { getCommentsByType, getCommentsNum } from '@/api/product.js'
  import CommentItem from '@/components/CommentItem.vue'

  const { productId } = defineProps({
    productId: {
      type: [String, Number],
      required: true,
    }
  })

  const commentsNum = ref({})
  const loadCommentsNum = async () => {
    const { status, data } = await getCommentsNum(productId)
    if (status === 200) {
      commentsNum.value = data
    }
  }
  loadCommentsNum()

  const commentType = ref(0) // 0 - 全部，1 - 好评，2 - 中评，3 - 差评
  const comments = ref([])
  const loadCommentsData = async () => {
    const { status, data } = await getCommentsByType(productId, commentType.value)
    if (status === 200) {
      comments.value = data
      console.log(data)
    }
  }
  loadCommentsData()

  const changeCommentType = tag => {
    commentType.value = tag
    loadCommentsData()
  }
</script>

<style lang="scss" scoped>
    .tag {
        border-radius: 20px;
        padding: 0 8px;
        margin-right: 10px;
    }

    .active {
        background: #FBC546;
    }
</style>
